{% extends "./logo/nav.html" %}

{% import './macros/blog-list.html' as list %}
{% import './macros/loadMore.html' as loadBtn %}
{% import './macros/user-info.html' as user%}
{% import './macros/fans.html' as fans%}
{% import './macros/follower.html' as follower %}

{% block headcss %}
<link rel="stylesheet" href="/css/home.css">
{% endblock %}

{% block logo %}
<div class="container">
  <div class="row">
    <!-- 左侧 -->
    <div class="col-lg-8 left ">
      <div class="create-blog">

        <div> <textarea name="" id="blod-content" rows="3" style="resize:none;"></textarea></div>
        <button class="btn btn-primary" id="btn-publish">发表</button>&nbsp;
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-image" fill="currentColor"
          xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M14.5 3h-13a.5.5 0 0 0-.5.5v9c0 .013 0 .027.002.04V12l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094L15 9.499V3.5a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm4.502 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
        </svg>
        <input type="file" id="file-input">
        <!--  input 作用是存放上传的url地址 -->
        <input type="hidden" value="" id="file-img-url">
        <a id="img-upload" style="cursor:pointer">插入一张图片</a>
        <span class="img-info"></span>
        <!-- 上传后的提示信息  -->
      </div>
      <hr>
    </div>
    <!-- 右侧 -->
    <div class="col-lg-4 right">
      {{ user.userInfo(
        user = userData.userInfo,
        isMe = true
      ) }}
      <hr>
      <!-- 关注列表 -->
      {{ follower.showFollower(count=userData.followData.count,userList=userData.followData.followList) }}
      <hr>
      <!-- 粉丝列表 -->
        {{ fans.showFans(count=userData.fansData.count,userList=userData.fansData.fansList) }}
    </div>
  </div>
</div>
{% endblock %}

{% block js %}
<script>
  $("#img-upload").click(function (e) {
    e.preventDefault()
    $("#file-input").click()
  })
  //图片上传
  $("#file-input").change(function () {
    const file = $(this)[0].files[0]
    ajax.upload("/api/uploadImg", file, function (error, data) {
      if (error) {
        alert(error)
        return;
      }
      console.log(data)
      $(".img-info").text(file.name)
      $("#file-img-url").val(data.url)
    })
  })
  //点击发表按钮 发布/创建 博客
  $("#btn-publish").click(function (e) {
    e.preventDefault()
    const content = $("#blod-content").val()
    const image = $("#file-img-url").val()
    if (content == "") {
      alert("发布的博客不能为空! ")
      return
    }
    const data = { content }
    if (image) {
      data.image = image
    }
    // console.log("这是发布博客的内容: " + content)
    ajax.post("/api/blog/createBlog", data, function (error, data) {
      if (error) {
        alert(error)
        return;
      }
      // console.log(data)
      $("#blod-content").val("")
      $(".img-info").text("")
      alert("发表成功!")

    })
  })

</script>
{% endblock %}